<template>
	<view>
		<view style="
	   padding: 22rpx;
	   position: fixed;
	   width: 95%;
	   background: rgb(255, 255, 255);
	   margin-bottom: 22px;
	   border-bottom: #ebebeb61 solid;
	   z-index: 99;">
			<u-search shape="round" placeholder="请输入预算名称" v-model="budgetNm" @custom="butSearch" search="butSearch">
			</u-search>
		</view>
		<!-- 主体 -->
		<view class="main" v-if="items.length > 0">
			<view>
				<view style="height: 30rpx"></view>
				<!-- 主体内容 -->
				<view class="listblock" v-for="(item, index) in items" :key="index" @click="clickList(item)">
					<view class="budgetNo">
						<view>{{ item.budgetNo }}</view>
						<view class="budgetNoLeft" :style="{ color: $oaconfig.backgroundColor}">|</view>
					</view>

					<view class="details">
						<view>
							<view class="minileabel">预算名称</view>
							<view>{{ item.budgetNm }}</view>
						</view>
						<view>
							<view class="minileabel">预算年度</view>
							<view>{{ item.budgetYear }}</view>
						</view>
						<view>
							<view v-if="item.subdeptId == 'NV'" class="minileabel">项目名称</view>
							<view>{{ item.projectName }}</view>
						</view>
						<view>
							<view v-if="item.subdeptId == 'NV'" class="minileabel">内部订单描述</view>
							<view style="margin-left: 30rpx;">{{ item.orderNm }}</view>
						</view>
					</view>

					<view class="imageBox" style="display: none">
						{{ item.click }}
						<view v-show="!item.checked" class="iconfont icon-weixuanzhong imageClass"></view>
						<view v-show="item.checked" class="iconfont icon-xuanzhong1 imageClass"></view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isEmpty" style="display: flex;flex-direction: column;align-items: center;justify-content: center;padding-top: 50%;">
			<view style="width: 200upx;height: 200upx;">
				<image style="width: 100%;height: 100%;" src="@/workspaces/static/oa/BG-blue@3x.png">
				</image>
			</view>
			<view style="font-size: 28upx;margin-top: 20upx;">暂无数据</view>
			<view style="font-size: 28upx;margin-top: 40upx; color: #3296fa;" @click="back">返回，重新选择费用科室>></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageindex: 1,
				pagesize: 10,
				budgetNm: '',
				items: [],
				budgetTypelist: [],
				annualValue: new Date().getFullYear(), //年度的值
				budgetAnnualList: [ //预算年度
					'2020', '2021', '2022', '2023', '2024', '2025'
				],
				tripIndex: 0,
				subdeptId: '',
				isEmpty: false
			};
		},

		onLoad(options) {
			if (options.trip) {
				this.tripIndex = options.trip;
				let pages = getCurrentPages();
				let prePage = pages[pages.length - 2];
				this.subdeptId = prePage.$vm.travelAppList.busiTripdEntityList[this.tripIndex].subdeptId;
			}
			this.getBudget();
		},
		watch: {
			budgetNm() {
				this.butSearch();
			}
		},
		onReachBottom() {
			//判断下一页是否存在数据，不存在将显示暂无数据等提示语
			if (this.items.length < this.pageindex * 10) {
				this.$api.showTip('暂无更多数据');
				return;
			} else {
				this.pageindex++; //页数加一
				this.getBudget(); //回调接口
			}
		},
		methods: {
			butSearch() {
				this.pageindex = 1;
				this.items = [];
				this.getBudget();
			},
			clickList(item) {
				let pages = getCurrentPages();
				let prePage = pages[pages.length - 2];
				prePage.$vm.travelAppList.busiTripdEntityList[this.tripIndex].budgetNo = item.budgetNo;
				prePage.$vm.travelAppList.busiTripdEntityList[this.tripIndex].budgetNm = item.budgetNm;
				setTimeout(function() {
					uni.navigateBack();
				}, 500)
			},
			getBudget() {
				let _this = this;
				_this.timer = setTimeout(() => { //重新开启新的延时器
					_this.$lyRequest.get('/gateway/budget/mp/dbsap/basedata/budget/queryList.do', {
						budgetType: '1',
						pageindex: _this.pageindex,
						pagesize: _this.pagesize,
						budgetNm: _this.budgetNm,
						subdeptId: this.subdeptId,
						budgetYear: _this.$oacommon.getNewDate(true, 'Y').retTwo
					}).then(data => {
						if (data.data.result == "1") {
							if (data.data.rows) {
								_this.items =[..._this.items,...data.data.rows];
							}
							if(_this.items.length == 0){
								_this.isEmpty= true;
							}
						}
					});
				}, 500);
			},
			back(){
				uni.navigateBack();
			}
		},
	};
</script>

<style lang="scss">
	page {
		background: rgb(249, 250, 254) !important;
	}

	.listblock {
		display: block;
		background: #ffffff;
		box-sizing: border-box;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 10px;

		.minileabel {
			font-size: 24rpx;
			color: #999999;
			min-width: 140rpx;
			display: flex;
			align-items: center;
		}

		.money {
			font-size: 28rpx;
			color: #666666;
			font-weight: bold;
			display: flex;
			align-items: center;
		}
	}

	.details {
		background: #f9fafe;
		border-radius: 8rpx;
		padding: 10rpx 30rpx;

		&>view {
			font-size: 28rpx;
			color: #333;
			display: flex;

			view {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
		}
	}

	.main {
		width: 100%;
		margin: 0 auto;
		font-size: 30.2rpx;
		/* 文字溢出，省略 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-bottom: 100rpx;
		padding-top: 86rpx;
	}

	.drms-img {
		margin: 360rpx auto;
		text-align: center;
		padding-top: 10%;
		color: #666666;
	}

	.imageClass {
		display: block;
		position: relative;
		font-size: 60rpx;
		right: 0;
	}

	.imageBox {
		display: flex;
		justify-content: flex-end;
		height: 60rpx !important;
		line-height: 60rpx;
	}

	.nav-bot {
		width: 50%;
		/* //background: firebrick; */
		/* color: #FFFFFF; */
		font-size: 36rpx;
		font-family: "Microsoft Yahei" !important;
	}

	.filterBox {
		background: #ffffff;
		border-bottom: 1px solid #EEEEEE;
		position: relative;

		.filter {
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
		}
	}

	.filterList {
		padding: 10rpx 20rpx;
		border-top: 1px solid #dddddd;

		view {
			padding: 10rpx 0;
			color: rgb(80, 148, 242);
		}
	}

	.icon-you {
		transform: rotate(90deg);
	}

	.deg270 {
		transform: rotate(270deg);
	}

	.budgetNo {
		font-size: 28rpx;
		color: #666666;
		position: relative;

		&>view {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
		}
	}

	.budgetNoLeft {
		position: absolute;
		left: -34rpx;
		top: -4rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
</style>
